<template>
  <div class="newcontentmain">
    <div class="newcontentmain_panel">
      <div class="newcontentmain_panel_swipedian">
        <span
          v-for="(item, index) in items[0].content"
          :key="'dian_' + index"
          :class="currentDian === index ? 'on' : ''"
          :style="{ width: 100 / items[0].content.length + '%' }"
        ></span>
      </div>
      <a
        href="javascript:;"
        class="newcontentmain_panel_swipedian_left"
        @click="directClickHandle(-1)"
      ></a>
      <a
        href="javascript:;"
        class="newcontentmain_panel_swipedian_right"
        @click="directClickHandle(1)"
      ></a>
      <van-swipe
        @change="onChange"
        ref="vanSwipe"
        :autoplay="swipeTime"
        v-if="items[0].content.length > 1"
        :style="{ height: '100%' }"
      >
        <van-swipe-item
          :class="items[0].isAd ? 'on' : ''"
          v-for="(sitem, index) in items[0].content"
          :key="'content_' + index"
          class="itempanel_content_panel_multiple"
        >
          <div
            class="itempanel_content_panel_image_touch"
            @touchstart="imgTouchStartHandle"
            @touchmove="imgTouchMoveHandle"
            @touchend="imgTouchEndHandle"
          >
            <i
              class="icon-favorites-fill icon animate__animated"
              v-if="isGood"
              :class="isGood ? 'animate__bounceIn' : ''"
            ></i>
          </div>
          <van-image
            :fit="sitem.style"
            :src="sitem.url"
            v-if="sitem.type === 'image'"
          />
          <video
            class="itempanel_content_panel_multiple_video"
            :width="screenWidth"
            :height="screenHeight"
            v-if="sitem.type === 'video'"
            @timeupdate="videoTimeUpdateHandle"
            ref="video"
          >
            <source :src="sitem.url" :type="'video/' + sitem.ext" />
            您的浏览器不支持 video 标签。
          </video>
          <div
            v-if="sitem.type === 'video'"
            class="itempanel_content_panel_multiple_video_control"
          >
            <div class="itempanel_content_panel_multiple_video_control_play">
              <a
                href="javascript:;"
                @click="videoPlayClickHandle"
                :class="videoStatus === 'stop' ? 'on' : ''"
                ><i class="icon-play_fill"></i
              ></a>
              <a
                href="javascript:;"
                @click="videoStopClickHandle"
                :class="videoStatus === 'play' ? 'on' : ''"
                ><i class="icon-stop"></i
              ></a>
            </div>
            <div
              class="itempanel_content_panel_multiple_video_control_timeupdate"
            >
              {{ currentTime }}/{{ durationTime }}
            </div>
          </div>
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator"><!-- {{ current + 1 }}/4 --></div>
        </template>
      </van-swipe>
      <div v-else>
        <div
          class="itempanel_content_panel_image_touch"
          @touchstart="imgTouchStartHandle"
          @touchmove="imgTouchMoveHandle"
          @touchend="imgTouchEndHandle"
        >
          <i
            class="icon-favorites-fill icon animate__animated"
            v-if="isGood"
            :class="isGood ? 'animate__bounceIn' : ''"
          ></i>
        </div>
        <van-image
          :fit="items[0].content[0].style"
          :src="items[0].content[0].url"
        />
      </div>
      <div class="newcontentmain_panel_header">
        <ItemPanelHeader :item="items[0]">
          <FollowButton slot="itemPanelHeaderMenu"></FollowButton>
        </ItemPanelHeader>
      </div>
      <div class="newcontentmain_panel_comment">
        <ul>
          <li
            v-for="(comment, cindex) in items[0].comments.list"
            :key="'comment_' + cindex"
          >
            <router-link
              :to="{ name: 'USER', params: { usid: comment.userId } }"
              class="itempanel_tools_aside_comment_user"
              >{{ comment.nickName }}</router-link
            ><span>{{ comment.content }}</span>
          </li>
          <li>
            <router-link
              :to="{ name: 'USER', params: { usid: items[0].userId } }"
              class="itempanel_tools_aside_comment_user"
              >{{ items[0].nickName }}</router-link
            >{{ items[0].content[0].desc }}
          </li>
        </ul>
      </div>
    </div>
    <BottomCommentInput :items="$store.state.user" :bottomType="bottomType">
      <input
        v-model="message"
        class="morecommentsmain_input"
        slot="input"
        :placeholder="
          $t('lang.以某某身份发布评论', {
            user: items.nickName || $t('lang.未知用户'),
          })
        "
      />
      <a
        href="javascript:;"
        class="morecommentsmain_send"
        @click="commentSendClickHandle"
        slot="handle"
        >{{ $t("lang.发布") }}</a
      >
    </BottomCommentInput>
  </div>
</template>
<script>
export default {
  name: "NewContentMain",
  data() {
    return {
      items: [],
      itemIndex: 0,
      showTools: true,
      message: "",
      bottomType: 2,
      followType: 2,
      isClose: false,
      isGood: false,
      currentDian: 0,
      screenWidth: 0,
      screenHeight: 0,
      swipeTime: 5000,
      currentTime: 0,
      durationTime: 0,
      videoStatus: "stop",
    };
  },
  components: {
    ItemPanelHeader: () =>
      import(
        /* webpackChunkName: "itemPanelHeader" */ "../../components/common/itemPanel/itemPanelHeader"
      ),
    BottomCommentInput: () =>
      import(
        /* webpackChunkName:"buttomCommentInput" */ "../../components/common/bottomCommentInput"
      ),
    FollowButton: () =>
      import(
        /* webpackChunkName:'followButton' */ "../../components/common/followButton.vue"
      ),
  },
  created() {
    let that = this,
      body = document.documentElement || document.body;

    that.screenWidth = body.clientWidth;
    that.screenHeight = body.clientHeight - 45 - 72;
    window.addEventListener("resize", () => {
      let body = document.documentElement || document.body;

      that.screenWidth = body.clientWidth;
      that.screenHeight = body.clientHeight - 45 - 72;
    });
    this.items = [
      {
        id: "0123456",
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
        isFollow: true,
        contentId: "0123456",
        content: [
          {
            type: "video",
            style: "cover",
            ext: "mp4",
            url: "http://vjs.zencdn.net/v/oceans.mp4",
          },
          {
            type: "image",
            style: "cover",
            url:
              "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
          },
          {
            type: "image",
            style: "contain",
            url:
              "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
          },
          {
            type: "image",
            style: "none",
            url:
              "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
          },
        ],
        tags: ["早晨", "asdfasdf", "电影", "娱乐自己", "标签测试", "线上测试"],
        isGood: true,
        goodCount: 2314,
        isCollection: true,
        comments: {
          list: [
            {
              userId: "0123456",
              nickName: "test",
              content: "comment content.",
            },
            {
              userId: "0123456",
              nickName: "adfasdfasd",
              content: "comment content. adfasdfasdfas",
            },
          ],
          count: 3312,
        },
        lastTime: 1595245074825,
      },
    ];
    this.items[0].content.forEach((a, b) => {
      if (a.type === "video" && a.ext) {
        this.swipeTime = 0;
      }
    });
  },
  watch: {
    "$refs.video"(v) {
      this.videoStatus = v[0].paused ? "stop" : "play";
    },
  },
  mounted() {
    this.$refs.video[0].width = this.screenWidth;
    this.$refs.video[0].height = this.screenHeight;
    window.scrollTo(1, 1);
  },
  methods: {
    videoPlayClickHandle(e) {
      this.$refs.video[0].play();
      this.videoStatus = "play";
    },
    videoStopClickHandle(e) {
      this.$refs.video[0].pause();
      this.videoStatus = "stop";
    },
    videoTimeUpdateHandle(e) {
      this.currentTime = this.getCurrentTime(
        e.target.currentTime,
        e.target.duration
      );
      this.durationTime = this.getCurrentTime(
        e.target.duration,
        e.target.duration
      );
    },
    getCurrentTime(a, c) {
      c = c || a;
      var d = Math.floor(a % 60),
        e = Math.floor((a / 60) % 60),
        g = Math.floor(a / 3600),
        h = Math.floor((c / 60) % 60),
        k = Math.floor(c / 3600);
      if (isNaN(a) || Infinity === a) g = e = d = "-";
      g = 0 < g || 0 < k ? g + ":" : "";
      return (
        g +
        (((g || 10 <= h) && 10 > e ? "0" + e : e) + ":") +
        (10 > d ? "0" + d : d)
      );
    },
    directClickHandle(v) {
      this.$refs["vanSwipe"][v > 0 ? "next" : "prev"]();
    },
    onChange(v) {
      this.currentDian = v;
    },
    commentSendClickHandle() {},
    imgTouchStartHandle(e) {
      var touches = e.touches[0];
      this.startTime = new Date();
      this.start = {
        x: touches.pageX,
        y: touches.pageY,
      };
      this.end = {
        x: 0,
        y: 0,
      };
      this.deltaX = 0;
      this.deltaY = 0;
      this.endTime = null;
    },
    imgTouchMoveHandle(e) {
      var touches = e.touches[0];
      this.end = {
        x: touches.pageX,
        y: touches.pageY,
      };
    },
    imgTouchEndHandle(e) {
      this.endTime = new Date();
      this.deltaX = this.end.x - this.start.x;
      this.deltaY = this.end.y - this.start.y;
      if (
        this.deltaX <= 10 &&
        this.deltaY <= 10 &&
        this.endTime - this.startTime > 500
      ) {
        //console.log(e, "singleTap", this.endTime - this.startTime);
        //callback && callback.call(this, e, "singleTap", endTime - startTime);
        this.doubleTime = null;
      } else if (
        this.deltaX <= 10 &&
        this.deltaY <= 10 &&
        this.endTime - this.doubleTime < 500
      ) {
        // console.log(e, "doubleTap", this.endTime - this.doubleTime);
        this.isGood = true;
        this.timeout && clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          this.isGood = false;
        }, 2000);
        //callback && callback.call(this, e, "doubleTap", endTime - doubleTime);
      } else {
        this.doubleTime = this.endTime;
      }
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.newcontentmain {
  background-color: #000;
  text-align: left;
  display: flex;
  .newcontentmain_panel {
    height: 100vh;
    width: 100vw;
    .van-image {
      img {
        height: 100vh;
        width: 100vw;
        /*       filter: blur(80 / @base);
 */
      }
    }
    .newcontentmain_panel_swipedian_left {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 3;
      width: 100 / @base;
    }
    .newcontentmain_panel_swipedian_right {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 3;
      width: 100 / @base;
    }
    .newcontentmain_panel_swipedian {
      position: absolute;
      top: 45 / @base;
      left: 150 / @base;
      right: 150 / @base;
      bottom: 0;
      display: flex;
      z-index: 3;
      height: 2 / @base;
      span {
        display: block;
        background-color: rgba(255, 255, 255, 0.2);
        height: 2 / @base;
        &.on {
          background-color: brown;
        }
      }
    }
    .itempanel_content_panel_image_touch {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      .icon {
        font-size: 100 / @base;
        color: #fff;
        text-shadow: rgba(153, 153, 153, 0.5) 5 / @base 1 / @base 10 / @base;
      }
    }
    .itempanel_content_panel_multiple_video {
      z-index: 1;
      position: absolute;
      top: 45 / @base;
      left: 0;
      right: 0;
      bottom: 0;
    }
    .itempanel_content_panel_multiple_video_control {
      z-index: 3;
      position: absolute;
      top: 105 / @base;
      left: 80 / @base;
      right: 80 / @base;
      display: flex;
      padding: 10 / @base;
      border-radius: 5 / @base;
      background-color: rgba(153, 153, 153, 0.1);
      height: 10 / @base;
      line-height: 10 / @base;
      color: #ccc;
      text-align: center;
      .itempanel_content_panel_multiple_video_control_play {
        width: 50%;
        display: flex;
        border-right: 1 / @base solid #666;
        padding: 0 10 / @base 0 0;
        a {
          width: 50%;
          display: block;
          color: #666;
          &.on {
            color: #fff;
          }
        }
      }
      .itempanel_content_panel_multiple_video_control_timeupdate {
        width: 50%;
        text-align: center;
      }
    }
    .newcontentmain_panel_header {
      position: absolute;
      top: 50 / @base;
      left: 20 / @base;
      right: 20 / @base;
      background-color: rgba(153, 153, 153, 0.3);
      color: #fff;
      padding: 5 / @base;
      border-radius: 5 / @base;
      z-index: 3;
      .itempanel_header {
        padding: 0 5 / @base;
        a {
          color: #fff;
        }
        .itempanel_header_right {
          .followbutton {
            margin: 3 / @base 0 0;
          }
        }
      }
    }
    .newcontentmain_panel_comment {
      position: absolute;
      bottom: 72 / @base;
      left: 20 / @base;
      right: 20 / @base;
      background-color: rgba(153, 153, 153, 0.3);
      color: #fff;
      padding: 5 / @base 10 / @base;
      border-radius: 5 / @base;
      z-index: 3;
      ul {
        li {
          padding: 5 / @base 0;
        }
      }
      a {
        color: #fff;
        margin: 0 5 / @base 0 0;
        font-weight: 700;
      }
    }
  }
}
</style>
